import { Button, Form, Input, Table } from 'antd'
import React from 'react'
import DesignerSetterModal from '../../../designer/SetterModal'

export * from './index'


export const Setter = ()=>{
    return <div>
       <Form.Item label="变量">
    <DesignerSetterModal  trigger={
      <Button>设置</Button>
    }    
    >
  
    <Form.List name="store">
      {(dataSource,{add})=>{
        return <div>
          <Table 
          columns={[{
            dataIndex:'key',
            title:'变量名称',
            render(value, record, index) {
                return <Form.Item name={[record.name,'key']}><Input/></Form.Item>
            },
          },{
            dataIndex:'type',
            title:'变量类型',
            render(value, record, index) {
                return <Form.Item name={[record.name,'type']}><Input/></Form.Item>
            },
          },{
            dataIndex:'value',
            title:'变量值',
            render(value, record, index) {
                return <Form.Item name={[record.name,'value']}><Input/></Form.Item>
            },
          }]}
          pagination={false} dataSource={dataSource}/>
          <Button block shape='round'  type='dashed' onClick={()=>add({key:'name'})}>增加变量</Button>
        </div>
      }}
    </Form.List>
        
    </DesignerSetterModal>
    </Form.Item>
    </div>
}